<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <canvas style="width: 80%" id='canvas'></canvas>

  <script src='https://cdn.jsdelivr.net/npm/rtsp-relay@1.9.0/browser/index.js'></script>
  <script>
    const wsProtocol = 'wss:'
    const hostname = 'panopticzone.wens.com.cn'
    const streamRelayWsPort = 2030
    const streamUrl = '127.0.0.1/pano2_0'
    const baseAdditionalFlags = ['-f', 'mpegts', '-codec:v', 'mpeg1video', '-q', '6', '-r', '25']
    const additionalFlags = ['-s', '1920x1080', ...baseAdditionalFlags]
      .map(encodeURIComponent)
      .join(',')

    const panoramaSocketUrl = `${wsProtocol}//${hostname}:${streamRelayWsPort}/api/stream/${streamUrl}?additionalFlags=${additionalFlags}`

    loadPlayer({
      audio: false,
      url: panoramaSocketUrl,
      canvas: document.getElementById('canvas'),
      videoBufferSize: 1024 * 1024 * 10,
      disconnectThreshold: 999999999999999,
    });
  </script>
</body>

</html>